import React, { useState, useEffect} from 'react';
import { Carousel, Divider, Form, Input, Button, Checkbox, Radio, Space, Spin, message } from 'antd';
import { useHistory } from 'react-router-dom'
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import './Login.css'
import bg1 from './bg1.jpg'
import bg2 from './bg2.jpg'

const Login = (props) => {
    let history = useHistory();
    const onFinish = (values) => {
        console.log('Success:', values);
        if (values.username == "admin" && values.password == "123"&&values.xitong==2) {
           // history.push("/home");
           sessionStorage.setItem("isLogin","true")
           sessionStorage.setItem("userInfo",JSON.stringify(values))
            history.push("/zy")
            message.success('登录成功，欢迎你，'+values.username);
            
        }else if(values.username == "admin" && values.password == "123"&&values.xitong==1){
            sessionStorage.setItem("isLogin","true")
            sessionStorage.setItem("userInfo",JSON.stringify(values))
            history.push("/mz")
            message.success('登录成功，欢迎你，'+values.username);
        }else{
            message.error('用户名或密码错误！');
        }
    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    const layout = {
        labelCol: {
            span: 5,
        },
        wrapperCol: {
            offset: 2,
            span: 20,
        },
    };
    const tailLayout = {
        wrapperCol: {
            offset: 2,
            span: 20,
        },
    };
    const imgs = [
        bg1,
        bg2
    ]
    const styles = {
        bg: {
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100vh'
        }
    }



    const [value, setValue] = React.useState(1);

    const onChange = e => {
        console.log('radio checked', e.target.value);
        setValue(e.target.value);
    };
    return (
        
        <div style={styles.bg} className='home' >
            <Carousel effect='fade' className='size' autoplay="true">
                {imgs.map(item => <div key={item}><div className='size' style={{ backgroundImage: `url(${item})` }} /></div>)}
                {/*不用img标签是因为图片大小会出现问题*/}
            </Carousel>
            <div className='loginBox'>
                <div className='content'>
                    {/* <Divider orientation="left" style={{ fontWeight: 600, color: "#333", fontSize: "23px", padding: "30px 0 0" }}> 中山大学医院管理系统</Divider> */}
                    <Divider orientation="left" style={{ fontWeight: 600, color: "#333", fontSize: "23px", padding: "30px 0 60px 0" }}>立即登录</Divider>
                    <div >
                        <Form
                            {...layout}
                            name="basic"
                            initialValues={{
                                remember: true,
                            }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                            size="large"
                        >
                            <Form.Item
                                name="username"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入用户名',
                                    },
                                ]}
                            >
                                <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" style={{borderRadius:"10px"}} className="loginInput"/>
                            </Form.Item>

                            <Form.Item
                                name="password"
                                rules={[
                                    {
                                        required: true,
                                        message: '请输入密码',
                                    },
                                ]}
                            >
                                <Input.Password prefix={<LockOutlined className="site-form-item-icon" />} placeholder="请输入密码" style={{borderRadius:"10px"}} className="loginInput"/>
                            </Form.Item>
                            <Form.Item
                                name="xitong"
                                rules={[
                                    {
                                        required: true,
                                        message: '请选择要登录的系统',
                                    },
                                ]}
                            >
                                <Radio.Group onChange={onChange} value={value}>
                                    <Radio value={1}>门诊部</Radio>
                                    <Radio value={2}>住院部</Radio>
                                </Radio.Group>
                            </Form.Item>

                            <Form.Item {...tailLayout}>
                                <Button htmlType="submit" className="loginBtn">
                                    登录
                                </Button>
                            </Form.Item>
                        </Form>
                            
                        
                    </div>
                    <Divider orientation="left" style={{fontSize:"10px",padding:"10px 0"}}>欢迎登录复旦大学五官科医院管理系统</Divider>
                </div>

            </div>
        </div>
       
    );
}

export default Login;
